<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div>
      <div>
        <el-col :span="12">
          <el-card
            class="work-bigbox"
            style="
              height: 160px;
              margin-right: 15px;
              padding-left: 10px;
              padding-right: 10px;
            "
          >
            <!-- <i class="el-icon-user"></i> -->
            <h3 style="margin: 0px" class="tit">日销售统计</h3>
            <div class="work-box">
              <el-col :span="10">
                <div class="work">
                  <h2 class="num">{{ dayorderCount.data }}</h2>
                  <p class="tag1">工单总数(个)</p>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="work">
                  <h2 class="num">{{ dayorderAmount.data }}</h2>
                  <p class="tag1">工单总数(个)</p>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="work">
                  <h2 class="num">{{ daytotalBill.data }}</h2>
                  <p class="tag1">工单总数(个)</p>
                </div>
              </el-col>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card
            class="work-bigbox"
            style="
              height: 160px;
              margin-right: 15px;
              padding-left: 10px;
              padding-right: 10px;
            "
          >
            <!-- <i class="el-icon-user"></i> -->
            <h3 style="margin: 0px" class="tit">月销售统计</h3>
            <div class="work-box">
              <el-col :span="10">
                <div class="work">
                  <h2 class="num12">{{ monthorderCount.data }}</h2>
                  <p class="tag12">工单总数(个)</p>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="work">
                  <h2 class="num12">
                    {{ (monthorderAmount.data / 1000000).toFixed(2) }}
                  </h2>
                  <p class="tag12">工单总数(个)</p>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="work">
                  <h2 class="num12">
                    {{ (monthtotalBill.data / 100).toFixed(2) }}
                  </h2>
                  <p class="tag12">工单总数(个)</p>
                </div>
              </el-col>
            </div>
          </el-card>
        </el-col>
      </div>
      <div class="search">
        <el-form :inline="true" :model="form">
          <el-col :span="6">
            <el-form-item label="合作商">
              <el-select
                clearable
                size="medium"
                v-model="form.name"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <div class="block">
                <span class="demonstration">日期</span>
                <el-date-picker
                  v-model="form.daty"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item>
              <el-button
                size="medium"
                type="primary"
                icon="el-icon-search"
                @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
        <div>
<div>
        <el-col :span="12">
          <el-card
            class="work-bigbox"
            style="
              height: 70px;
              margin-right: 15px;
              padding-left: 10px;
              padding-right: 10px;
            "
          >
            <!-- <i class="el-icon-user"></i> -->
            <div class="work-box">
              <el-col :span="10">
                <div class="work">
                  <h6 class="num23">笔数统计{{ searorderCount.data }}个</h6>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="work">
                  <h6 class="num23">收入统计{{ searchtotalBill.data }}个</h6>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="work">
                  <h6 class="num23">分成统计{{ searchorderAmount.data }}个</h6>
                </div>
              </el-col>
            </div>
          </el-card>
        </el-col>

      </div>

        </div>
      </div>

      <div class="result">
        <div class="body">
          <template>
            <el-table :data="tableData" size="small" style="width: 100%">
              <el-table-column label="序号" width="80px">
                <template slot-scope="scop">
                  {{ pageIndex * 10 + scop.$index + 1 - 10 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="ownerName"
                label="合作商"
              ></el-table-column>
              <el-table-column prop="ratio" label="分成比例">
                <template slot-scope="scope">
                  {{ scope.row.ratio + "%" }}
                </template>
              </el-table-column>
              <el-table-column prop="orderTotalMoney" label="收入(元)">
                <template slot-scope="scope">
                  {{ "+" + (scope.row.orderTotalMoney / 100).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="orderCount" label="笔数">
              </el-table-column>
              <el-table-column prop="totalBill" label="分成金额">
                <template slot-scope="scope">
                  {{ "+" + (scope.row.totalBill / 100).toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
            <div class="title">
              <span class="text"
                >共 {{ total }} 条记录 第{{ pageIndex }}/{{ totalPage }}页</span
              >
              <div class="pageChange">
                <el-button size="small" :disabled="disabled" @click="pageUp"
                  >上一页</el-button
                >
                <el-button
                  size="small"
                  :disabled="disabledDown"
                  @click="pageDown"
                  >下一页</el-button
                >
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  dayorderCount,
  monthorderCount,
  monthorderAmount,
  dayorderAmount,
  monthtotalBill,
  daytotalBill,
  list,
  tablelist,
  searchtablelist,
  searchtotalBill,
  searchorderAmount,
  searorderCount
} from '@/api/sum'
// import newForm from './components/newForm.vue'
// import viewDetails from './components/viewDetails.vue'
export default {
  components: {
    // newForm,
    // viewDetails
  },
  computed: {
    disabled () {
      // 如果页面小于2的时候上一页就会变成黑色不能再按
      if (this.pageIndex < 2) {
        return true
      } else {
        return false
      }
    },
    disabledDown () {
      if (this.pageIndex === this.totalPage) {
        return true
      } else {
        return false
      }
    }
  },
  data () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },

      dayorderCount: '',
      monthorderCount: '',
      monthorderAmount: '',
      dayorderAmount: '',
      monthtotalBill: '',
      daytotalBill: '',
      list: '',
      form: {
        // 搜索的form表单
        daty: '',
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [], // 页面列表
      total: '',
      pageIndex: '',
      totalPage: '',
      newform: {
        // 搜索的form表单
        start: '',
        end: '',
        partnerName: '',
        pageIndex: '',
        pageSize: ''
      },
      searchtotalBill: '',
      searchorderAmount: '',
      searorderCount: ''
    }
  },

  async created () {
    this.dayorderCount = await dayorderCount()
    this.monthorderCount = await monthorderCount()
    this.monthorderAmount = await monthorderAmount()
    this.dayorderAmount = await dayorderAmount()
    this.monthtotalBill = await monthtotalBill()
    this.daytotalBill = await daytotalBill()
    const {
      data: { currentPageRecords }
    } = await list()
    this.list = currentPageRecords
    this.getPointList()
    // const { data } = await getPointListAll()
    // this.getPointListAll = data.currentPageRecords
    // console.log(this.getPointListAll)
  },
  methods: {
    // 点击按钮之后进行搜索
    async onSubmit () {
      // const res = this.form.daty[0]
      // console.log(this.form.daty[0].slice(0, 16))

      console.log(this.form)
      this.newform.partnerName = this.form.name
      this.newform.start = this.form.daty[0]
      this.newform.end = this.form.daty[1]
      this.newform.pageIndex = this.form.pageIndex
      this.newform.pageSize = this.form.pageSize
      console.log(this.newform)
      await searchtablelist(this.newform)
      this.searchtotalBill = await searchtotalBill(this.newform)
      this.searchorderAmount = await searchorderAmount(this.newform)
      this.searorderCount = await searorderCount(this.newform)
      // 如果input中输入了文字进行按需筛选
      if (this.form.name) {
        this.getPointList()
      } else this.getPointList() // 没有输入的后刷新页面
    },
    pageUp () {
      this.form.pageIndex = this.form.pageIndex - 1
      this.getPointList(this.form)
    },
    pageDown () {
      this.form.pageIndex = this.form.pageIndex + 1

      this.getPointList(+this.form)
    },
    // 封装一个页面列表请求函数
    async getPointList () {
      const { data } = await tablelist(this.form)
      this.tableData = data.currentPageRecords
      this.total = data.totalCount
      this.pageIndex = data.pageIndex
      this.totalPage = data.totalPage
    }
  }
}
</script>

<style lang="scss" scoped>
// .heand{
//   // margin-top: 15px;
// }
.title {
  padding-top: 10px;
  display: flex;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px !important;
    color: #dbdfe5 !important;
  }
  .pageChange {
    margin-right: 90px;
  }
}
.work-bigbox {
  // background: url(@/assets/bb.webp) no-repeat center / cover;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.work-box {
  display: flex;
}
.work {
  padding-top: 10px;
  // padding-left: 30px;
  justify-content: space-around;
  .num {
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #072074;
    font-size: 33px;
    margin: 6px 0;
    text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
  }
  .tag1 {
    padding-top: 5px;
    color: #91a7dc;
    margin: 0;
    font-size: 10px;
    text-align: center;
  }
  h2 {
    text-align: center;
  }
}
.num12 {
  color: #ff5757;
  font-size: 33px;
  margin: 6px 0;
  text-shadow: 2px 4px 7px rgba(252, 220, 212, 0.2);
}
.tag12 {
  color: #ff5757;
  font-size: 10px;
  padding-top: 5px;
  text-align: center;
  text-shadow: 2px 4px 7px rgba(252, 220, 212, 0.2);
}
.search {
  padding-top: 180px;
}
.num23{
    color: #ff5757;
  font-size: 16px;
  margin: 6px 0;
  text-shadow: 2px 4px 7px rgba(252, 220, 212, 0.2);
  line-height: 10px;
}
</style>
